<template>
    <div class="flex-c flex-col mb-">
        <div class="pb-[16px] mb-[16px] flex-c  text-center relative">
            <div :class="`${checkedIndex == 0 ? 'text-[#fff]' : 'text-[#B6CDE6]'} w-[150px] cursor-pointer`"
                @click="changeUrl(0)">安卓下载</div>
            <div :class="`${checkedIndex == 1 ? 'text-[#fff]' : 'text-[#B6CDE6]'} w-[150px] cursor-pointer`"
                @click="changeUrl(1)">苹果下载</div>
            <div :class="`w-[100%] h-[1px] bg-[#195D88] absolute bottom-0 left-0 `">
            </div>
            <div
                :class="`w-[50%] h-[1px] bg-[#B6CDE6] absolute bottom-0 left-0 duration-300 ${checkedIndex == 0 ? 'translate-x-0' : 'translate-x-full'}`">
            </div>
        </div>
        <div class="my-[20px]">
            <ReQrcode tag="img" :text="url"></ReQrcode>
        </div>
    </div>
</template>
<script setup lang="ts">
import ReQrcode from '@/components/ReQrcode'
import { useGlobal } from '@pureadmin/utils';

const checkedIndex = ref(0)
const config = ref(useGlobal().$config)
const url = ref(config.value.androidDownloadUrl)// iosDownloadUrl

const changeUrl = (index) => {
    checkedIndex.value = index
    if (index == 0) {
        url.value = config.value.androidDownloadUrl
    } else {
        url.value = config.value.iosDownloadUrl
    }
}
</script>
<style lang="scss" scoped></style>